<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib/react.development.js"></script>
  <script src="../lib/react-dom.development.js"></script>
  <script src="../lib/babel.min.js"></script>
  <script src="../lib/prop-types.js"></script>
  <!-- 用于对属性的限制 -->
  <script type="text/babel">
      class MyComponent extends React.Component{
    //下面是props的简写方式:放在类下面(添加static),react会自动把类上面的属性添加
        static propTypes={//限制传递的类型
          name:PropTypes.string,//限制name的类型为字符串
          sex:PropTypes.string,
          speak:PropTypes.func//限制传递值为函数类型
      }
     static defaultProps={//如果不传值则给他一个默认值
          name:"euwrsei",
          sex:'不男不女'
      }
          render(){
              console.log(this)
              console.log(this.props.speak)
              return <h2>我是porps的简写方式{this.props.name}{this.props.sex}</h2>
          }
      }
    //  MyComponent.propTypes={//限制传递的类型
    //       name:PropTypes.string,//限制name的类型为字符串
    //       sex:PropTypes.string,
    //       speak:PropTypes.func//限制传递值为函数类型
    //   }
    //   MyComponent.defaultProps={//如果不传值则给他一个默认值
    //       name:"euwrsei",
    //       sex:'不男不女'
    //   }
      ReactDOM.render(<MyComponent speak={speak}/>,document.getElementById('test'))
    function speak(){
          console.log('你会说话吗?')
      }
      </script>
</body>
</html>